<template>
  <div>
    <h3>获取otp信息</h3>
    <div>
        <label for=""></label>
        <div>
            <el-row>
                <el-col :span="8"></el-col>
                <el-col :span="7">
                    <el-input v-model="telphone" placeholder="Please input" id="getotp_button-input"/>
                </el-col>
                <el-col :span="8">
                    <el-button type="primary" id="getotp_button" @click="getOTP()">发送otp短信</el-button>
                </el-col>
               
            </el-row>
            
            
        </div>
        <div>


        </div>
    </div>
  </div>
</template>

<script>
import qs from 'qs'
export default {
    data() {
        return {
            telphone: "",
        }
    },
    methods: {
        getOTP() {
            if (this.telphone == "" || this.telphone == null) {
                alert("手机号不能为空");
                return false;
            };
            var phone = {telphone:this.telphone};
            this.$http({
                method: 'POST',
                url: this.$backend + "/user/getotp",  
                data: qs.stringify(phone),
                withCredentials: true,
            })
            .then((result) => {
                alert("短信已经发送到您手机上, 请注意查收")
                console.log(result.data)
                this.$router.push('/source/user/register')
                return true
            }).catch((err) => {
                console.log(err)
                alert("发送信息超时, 请稍后再试");
                return false;
            });

        }
    },
}
</script>

<style>
    #getotp_button_input {
        border-radius: 20px
    }
    #getotp_button {
        float: left;
        margin-left: 5px;
    }
</style>